<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>

    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../mycss/chat.css">
    <title>主界面</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body class="containers">
    <div id="containers" v-cloak>
        <!-- 消息窗口 -->
        <div id="chats">
            <!-- 用户列表 -->
            <div id="userList" v-show="showUserListFlag">
                <!-- 显示在线用户 -->
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="text-align: center;font-size: 14px;">在线用户人数
                            <p style="margin-top: 3px;">
                                {{online_people_count}}人在线
                            </p>
                            <p><input class="form-control" type="text" placeholder="用户名检索" v-model="searchUserName"></p>
                        </h4>
                    </div>
                </div>
                <div class="pre-scrollable">
                    <!-- 显示在线的人---》在线用户列表 -->
                    <div class="list-group">
                        <li class="list-group-item borderLi" v-for="item in search(searchUserName)"
                            @click="showChatWindow(item)" :key="item.id">
                            <img width="40" height="35" :src="item.image" class="img-circle">
                            <span>{{item.username}}</span>
                            <span class="badge textVerticle">{{item.uid}}</span>
                        </li>
                    </div>
                </div>
                <p
                    style="text-align: center;background-color: rgb(245, 233, 219);line-height: 35px;border-radius: 3px;">
                    123
                </p>
            </div>
            <!-- 聊天耳朵 -->
            <div id="chatIcon" @click="showUserList">
                <span class="glyphicon glyphicon-globe chat-icon"></span>
            </div>
        </div>
        <!-- 聊天窗口 -->
        <div id="shade" v-show="showChatWindowFlag">
            <!-- 清除遮罩 -->
            <span class="glyphicon glyphicon-remove delShade" @click="closeChatWindow"></span>
            <!-- 聊天窗口 -->
            <div class="chatWindows">
                <!-- 左边 -->
                <div class="left">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <!-- 个人信息 -->
                                <div>
                                    <!-- 头像 -->
                                    <img width="40" height="35" :src="loginUser.image" class="img-circle">
                                    <!-- 当前用户名 -->
                                    <span
                                        style="color: goldenrod;font-weight: 600;font-size: 14px;">{{loginUser.username}}</span>
                                </div>
                            </h4>
                        </div>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item actives">
                            <span class="badge"></span>
                            <h4 style="text-align: center;margin: 0;">世界频道</h4>
                        </li>
                    </ul>
                    <ul class="list-group">
                        <li class="list-group-item actives changeChannel">
                            <span class="badge"></span>
                            <h4 style="text-align: center;margin: 0;">个人频道</h4>
                        </li>
                    </ul>
                </div>
                <!-- 右边 -->
                <div class="right">
                    <!-- 头部 -->
                    <div class="panel panel-default" style="margin: 0;">
                        <div class="panel-heading">
                            <h4 style="text-align: center;">{{peerUser.username}}</h4>
                        </div>
                    </div>
                    <!-- 消息 -->
                    <div id="scrollBar" class="pre-scrollable" style="height: 60%;padding: 5px;border-bottom: 2px solid #ccc;">
                        <div class="chatContent" style="padding: 5px;"  v-for="(item,index) in content" :key="index">
                            <!-- 左对齐 -->
                            <div class="media" v-if="item.flag=='peer'">
                                <p style="text-align: center;">{{item.date}}</p>
                                <div class="media-left">
                                    <img width="40" height="35" :src="peerUser.image" class="media-object">
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">{{peerUser.username}}</h4>
                                    <div class="msgContent">
                                        {{item.content}}
                                    </div>
                                </div>
                            </div>

                            <!-- 右对齐 -->
                            <div class="media" v-if="item.flag=='login'">
                                <p style="text-align: center;">{{item.date}}</p>
                                <div class="media-body" style="text-align: end;">
                                    <h4 class="media-heading">{{loginUser.username}}</h4>
                                    <div class="msgContent" style="text-align: left;">
                                        {{item.content}}
                                    </div>
                                </div>
                                <div class="media-right">
                                    <img width="40" height="35" :src="loginUser.image" class="media-object">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文件上传 -->
                    <div class="upFile">
                        <nav class="navbar navbar-default upFileItem" role="navigation">
                            <div class="container-fluid">
                                <div>
                                    <ul class="nav navbar-nav">
                                        <li class="active">
                                            <a href="#">表情包</a>
                                        </li>
                                        <li>
                                            <a href="#">上传文件</a>
                                            <input type="file" value="上传文件" style="display: none;">
                                        </li>
                                        <li>
                                            <a href="#">上传图片</a>
                                            <input type="file" value="上传文件" style="display: none;">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                    <!-- 消息输入 -->
                    <div class="form-group msgSend">
                        <textarea id="messageInput" class="form-control messageInput" rows="3" v-model="sendContent" placeholder="请输入消息.."></textarea>
                        <div class="sendBtn"><input type="button" class="btn btn-success" value="发送" @click="sendMsg" style="outline: none;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- 如果放在元素前面 Vue实现会报错 查找不到要绑定的元素 应先让页面元素加载到内存 再进行操作 所以创建Vue实例的代码导入放在最后-->
<script src="../myjs/data.js"></script>
<script src="../myjs/chat.js"></script>
</body>
</html>

